<template>
  	<transition name="slide">
    	<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
  	</transition>
  	
</template>

<script type="text/ecmascript-6">
import MusicList from 'components/music-list/music-list'
import {getSingerDetail} from 'api/singer'
import {ERR_OK} from 'api/config'
import {createSong} from 'common/js/song'
import {mapGetters} from 'vuex'

  export default {
    computed: {
      	title() {
      		return this.singer.name;
      	},
      	bgImage() {
      		return this.singer.avatar;
      	},
      	...mapGetters([
        	'singer'
      	])
    },
    data() {
      	return {
        	songs: []
      	}
    },
    created() {
      	this._getDetail()
    },
    methods: {
      	_getDetail() {
      		if(!this.singer.id){
        		this.$router.push('./')
      			return 
      		}
        	getSingerDetail(this.singer.id).then((res) => {
                this.songs=this._normalizeSongs(res.data.list);
        	});
      	},
      	_normalizeSongs(list) {
      		let ret = []
      		list.forEach((item) => {
      			let {musicData} = item;
      			if (musicData.songid && musicData.albummid) {
            		ret.push(createSong(musicData))
          		}
      		})
      		return ret;
      	}
    },
    components: {
      	MusicList
    }
  }
</script>

<style scoped lang="less">
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}

</style>
